<template>
  <div class="shadowBg">
    <div class='inner-div' @click='indexNavigate'>
      <img src='./../assets/img/index/首页交互.png'>
    </div>
    <div class='inner-div' style='margin-right: auto' @click='inspectNavigate'>
      <img src='./../assets/img/index/车辆巡检交互.png'>
    </div>
    <div class='inner-div'>
      <img class="projectTitle" src="./../assets/img/指挥中心运维管理系统.png" alt="" />
      <div class="bxk glocalCenter"></div>
      <div class="realTime">{{ currentTime }}</div>
    </div>
    <div class='inner-div'><img src='./../assets/img/index/统计分析交互.png' @click='staticNavigate'></div>
    <div class='inner-div'><img src='./../assets/img/index/系统管理交互.png' @click='systemNavigate'></div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import formatDate from '@/utils/getCurrentDate'
import {RouterLink, RouterView } from 'vue-router'


let currentTime = ref('')
let timer

onMounted(() => {
  currentTime.value = formatDate(new Date())
  timeStart()
})

const timeStart = () => {
  timer = setInterval(() => {
    currentTime.value = formatDate(new Date())
  }, 1000)
}

onUnmounted(() => {
  // 卸载之前将定时器销毁
  if (timer) {
    clearInterval(timer) // 清除定时器
    timer = null // 重置定时器ID
  }
})




</script>
<style scoped>
.shadowBg {
  position: absolute;
  background-image: url('@/assets/img/四周羽化.png');
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* 鼠标透过背景图片拖拽操作地图 */

  display: flex ;
  justify-content: space-around;
  flex-direction: row;
}

.inner-div{
  margin-top: 1rem;
  height: min-content;
  img {
    pointer-events: auto;
    cursor: pointer;
  }
}

.projectTitle {
  position: fixed;
  top: 0.5vh;
  left: 50%;
  transform: translateX(-50%);
}

.bxk {
  width: 97.5vw;
  height: 98vh;
  background-image: url('@/assets/img/边框线.png');
  background-repeat: no-repeat;
  pointer-events: none; /* 鼠标透过背景图片拖拽操作地图 */
}

.realTime {
  position: absolute;
  left: 50%;
  top: 8vh;
  transform: translateX(-50%);
  width: 400px;
  height: 25px;
  background: linear-gradient(
    270deg,
    rgba(86, 191, 233, 0),
    rgba(95, 170, 207, 0.47) 15%,
    rgba(98, 162, 196, 0.66) 50%,
    rgba(93, 173, 210, 0.41) 86%,
    rgba(86, 191, 233, 0)
  );
  border-radius: 8px;
  text-align: center;
  color: white;
  font-weight: 500;
}

.glocalCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平和垂直居中 */
}
</style>
